<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="体检编号" prop="checkCode">
        <el-input
          v-model="queryParams.checkCode"
          placeholder="请输入体检编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="证件号" prop="idNo">
        <el-input
          v-model="queryParams.idNo"
          placeholder="请输入证件号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="体检类型" prop="checkType">
        <el-select v-model="queryParams.checkType" placeholder="请选择体检类型" clearable>
          <el-option
            v-for="dict in dict.type.dime_physical_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable>
          <el-option
            v-for="dict in dict.type.sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="婚否" prop="marriage">
        <el-select v-model="queryParams.marriage" placeholder="请选择婚否">
          <el-option
            v-for="dict in dict.type.dime_physical_marrie"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登记日期" prop="registerDate">
        <el-date-picker clearable
          v-model="queryParams.registerDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择登记日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="体检日期" prop="checkDate">
        <el-date-picker clearable
          v-model="queryParams.checkDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择体检日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="主检日期" prop="mainCheckDate">
        <el-date-picker clearable
          v-model="queryParams.mainCheckDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择主检日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="在岗状态" prop="workStatus">
        <el-select v-model="queryParams.workStatus" placeholder="请选择在岗状态" clearable>
          <el-option
            v-for="dict in dict.type.dime_physical_work"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="体检状态" prop="completStatus">
        <el-select v-model="queryParams.completStatus" placeholder="请选择体检状态" clearable>
          <el-option
            v-for="dict in dict.type.dime_physical_completstatus"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="登记类型" prop="registertype">
        <el-select v-model="queryParams.registertype" placeholder="请选择登记类型" clearable>
          <el-option
            v-for="dict in dict.type.dime_reigster_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['physical:physicalregister:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['physical:physicalregister:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <template scope="scope">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete(scope.row)"
            v-hasPermi="['physical:physicalregister:remove']"
          >删除</el-button>
        </template>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['physical:physicalregister:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-bottom"
          size="mini"
          :disabled="multiple"
          @click="getReport"
          v-hasPermi="['physical:physicalregister:getReport']"
        >获取结果</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          size="mini"
          :disabled="single"
          @click="lookInfo"
        >查看人员信息</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="physicalregisterList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="体检编号" align="center" prop="checkCode" />
      <el-table-column label="证件号" align="center" prop="idNo" width="170"/>
      <el-table-column label="姓名" align="center" prop="name" width="100">
        <template slot-scope="scope">
          <img class="sex" src="@/assets/images/nan.png" v-if="scope.row.sex=='MALE'">
          <img class="sex" src="@/assets/images/nv.png" v-if="scope.row.sex=='FEMALE'">
           {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="体检类型" align="center" prop="checkType" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_physical_type" :value="scope.row.checkType"/>
        </template>
      </el-table-column>
      <el-table-column label="登记类型" align="center" prop="registertype" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_reigster_type" :value="scope.row.registertype"/>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age" width="50"/>
      <el-table-column label="婚否" align="center" prop="marriage" width="60">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_physical_marrie" :value="scope.row.marriage"/>
        </template>
      </el-table-column>
      <el-table-column label="套餐名称" align="center" prop="packageName" width="200"/>
      <el-table-column label="单位名称" align="center" prop="companyName" width="150"/>
      <el-table-column label="登记日期" align="center" prop="registerDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.registerDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="体检日期" align="center" prop="checkDate" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="主检日期" align="center" prop="mainCheckDate" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.mainCheckDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="在岗状态" align="center" prop="workStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.dime_physical_work" :value="scope.row.workStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="体检状态" align="center" prop="completStatus" >
      <template slot-scope="scope">
        <dict-tag :options="dict.type.dime_physical_completstatus" :value="scope.row.completStatus"/>
      </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['physical:physicalregister:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['physical:physicalregister:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改人员登记对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="体检编号" prop="checkCode">
              <el-input v-model="form.checkCode" placeholder="请输入体检编号" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号" prop="idNo">
              <el-input v-model="form.idNo" placeholder="请输入证件号" disabled>
                <template #append>
                  <el-button class="el-icon-search" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="婚否" prop="marriage">
              <el-select v-model="form.marriage" placeholder="请选择婚否" style="width:100%">
                <el-option
                  v-for="dict in dict.type.dime_physical_marrie"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="工号" prop="empNo">
              <el-input v-model="form.empNo" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="部门" prop="dept">
              <el-input v-model="form.dept" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社保号" prop="socialCode">
              <el-input v-model="form.socialCode" placeholder="请输入社保号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="住址" prop="address">
              <el-input v-model="form.address" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="体检类型" prop="checkType">
              <el-select v-model="form.checkType" placeholder="请选择体检类型" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_physical_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记类型" prop="registertype">
              <el-select v-model="form.registertype" placeholder="请选择体检类型" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_reigster_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在岗状态" prop="workStatus">
              <el-select v-model="form.workStatus" placeholder="请选择在岗状态" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_physical_work"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体检状态" prop="completStatus">
              <el-select v-model="form.completStatus" placeholder="请选择体检状态"  style="width: 100%">
                <el-option
                  v-for="dict in dict.type.dime_physical_completstatus"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="危害因素" prop="harmfactorsData" class="required label-right-align">
              <my-tree-select v-model="form.dimeBaseharmList"
                              @change="treeChange"
                              :data="treeData"
                              value-field="id"
                              label="hamName"
                              children="harms"></my-tree-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="接触危害" prop="touchHarms" class="required  label-right-align">
              <el-input v-model="form.touchHarms" type="text" placeholder="请输入接触危害" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="总工龄(年)" prop="workYears" class="label-right-align">
              <el-input v-model="form.workYears" type="text" placeholder="请输入总工龄(年)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="总工龄(月)" prop="workMonths" class="label-right-align">
              <el-input v-model="form.workMonths" type="text" placeholder="请输入总工龄(月)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="接害工龄(年)" prop="touchYears" class="label-right-align">
              <el-input v-model="form.touchYears" type="text" placeholder="请输入接害工龄(年)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="grid-cell">
            <el-form-item label="接害工龄(月)" prop="touchMonths" class="label-right-align">
              <el-input v-model="form.touchMonths" type="text" placeholder="请输入接害工龄(月)" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看人员信息 -->
    <el-dialog title="体检信息" :visible.sync="physicalInfoDialog" width="1200px" append-to-body>
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="infoTitle">当前科室项目</div>
          <el-table :data="infoList" border max-height="550px" @row-click="handleClickGroup" :highlight-current-row=true>
            <el-table-column label="科室名称" align="center" prop="groupName" width="130px"/>
            <el-table-column label="状态" align="center" prop="flowStatus">
            <template slot-scope="scope">
              <span :style="{color:(scope.row.flowStatus== 0 ? 'red' : 'green')}">{{scope.row.flowStatus== 0 ? '未完成' : '已完成'}}</span>
            </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="19">
          <div class="infoTitle">细项结果</div>
          <el-table :data="combList" border max-height="500px">
            <el-table-column label="检查项目" align="center" prop="itemName" width="190px"/>
            <el-table-column label="检查结果" align="center" prop="result" width="240px"/>
            <el-table-column label="合格" align="center" prop="passTag">
              <template scope="scope">
                <el-checkbox v-model="scope.row.passTag" :true-label="1" :false-label="0"
                ></el-checkbox
                >
              </template>
            </el-table-column>
            <el-table-column label="缺检" align="center" prop="lack">
              <template scope="scope">
                <el-checkbox v-model="scope.row.lack" true-label="true" false-label="false"
                ></el-checkbox
                >
              </template>
            </el-table-column>
            <el-table-column label="标准值" align="center" prop="valDefault" />
            <el-table-column label="特殊标准值" align="center" prop="specialitem" />
          </el-table>
          <div class="conclusion">
            <div style=" white-space: nowrap;">小结：</div>
            <el-input v-model="conclusion" readonly></el-input>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { listPhysicalregister, getPhysicalregister, delPhysicalregister, updatePhysicalregister,getReport,getPhysicalInfo } from "@/api/physical/physicalregister";
import { getallharmtype } from '@/api/physical/basecompany'
import MyTreeSelect from '@/views/components/my-tree-select'
const defaultForm = {
  "address": "",
  "age": 0,
  "baseCompanyId": "",
  "basePackageId": "",
  "birthday": "",
  "channel": "",
  "checkCode": "",
  "checkDate": "",
  "checkResult": "",
  "checkType": "",
  "combLack": "",
  "companyName": "",
  "completStatus": "",
  "dept": "",
  "dimeBaseharmList": [],
  "empNo": "",
  "harmfacter": "",
  "headUrl": "",
  "headpicture": "",
  "healthSuggestion": "",
  "id": "",
  "idNo": "",
  "isValid": 0,
  "jobType": "",
  "lastCheckCode": "",
  "mainCheckDate": "",
  "mainCheckDoctor": "",
  "mainConclusion": "",
  "marriage": "",
  "name": "",
  "nation": "",
  "nationality": "",
  "needAsk": "",
  "packageName": "",
  "params": {},
  "password": "",
  "personType": "",
  "phone": "",
  "platformTag": "",
  "reCheckTag": "",
  "registerDate": "",
  "registertype": "",
  "remark": "",
  "reportPrintDate": "",
  "reportPrinter": "",
  "serviceUid": "",
  "sex": "",
  "shopCode": "",
  "soaOrderNo": "",
  "socialCode": "",
  "takeReportType": "",
  "touchHarms": "",
  "touchMonths": 0,
  "touchYears": 0,
  "workMonths": 0,
  "workStatus": "",
  "workYears": 0
}
export default {
  name: "Physicalregister",
  components: { MyTreeSelect },
  dicts: ['sys_user_sex', 'dime_physical_work', 'dime_physical_type','dime_physical_marrie','dime_physical_completstatus','dime_reigster_type'],
  data() {
    return {
      showTree: false,
      harmtList:[],
      treeData: [],
      infoList:[],
      combList:[],
      conclusion:'',
      physicalInfoDialog:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 人员登记表格数据
      physicalregisterList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        checkCode: null,
        idNo: null,
        name: null,
        checkType: null,
        sex: null,
        marriage: null,
        packageName: null,
        companyName: null,
        registerDate: null,
        checkDate: null,
        mainCheckDate: null,
        workStatus: null,
        completStatus: null,
        registertype: null,
      },
      selection:[],
      // 表单参数
      form: Object.assign({}, defaultForm),
      // 表单校验
      rules: {
        idNo: [
          { required: true, message: "证件号不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        registerDate: [
          { required: true, message: "登记日期不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getHarmsList()
  },
  methods: {
    treeChange(checkedNodes, checkedKeys) {
      this.form.touchHarms = this.getHarmLabel(checkedKeys).map((t) => { return t.hamName }).join(',')
    },
    getHarmsList() {
      getallharmtype().then(response => {
        this.harmtList = response.data;
        this.harmtList.forEach(harm=>{
          harm.id = harm.harmType
          harm.hamName = harm.harmTypeName
        })
        this.treeData = this.harmtList
      }).finally(()=>{
        this.showTree = true
      });
    },
    handleClickGroup(val){
      this.combList=val.dimePhysicalitemsList
      if(val.dimePhysicalconsion){
        this.conclusion=val.dimePhysicalconsion.conclusion
      }else{
        this.conclusion=''
      }
    },
    /** 查询人员登记列表 */
    getList() {
      this.loading = true;
      listPhysicalregister(this.queryParams).then(response => {
        this.physicalregisterList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    getReport(){
      this.loading = true;
      getReport(this.selection).then(response => {
        this.$modal.msgSuccess("获取成功");
      }).finally(()=>{
        this.loading = false;
      });
    },
    lookInfo(){
      this.loading = true;
      getPhysicalInfo(this.selection[0]).then(response => {
        this.combList=[]
        this.physicalInfoDialog=true
        this.infoList=response.data.registerflowViewDtoList
      }).finally(()=>{
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection=selection
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push(
        {
          path: '/physical/register',
        }
      )
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids
      getPhysicalregister(id).then(response => {
        this.form = response.data;
        if(this.form.dimeBaseharmList) {
          this.form.dimeBaseharmList = this.form.dimeBaseharmList.map(item=>{
            return item.id
          })
        }
        this.open = true;
        this.title = "修改人员登记";
      });
    },
    getHarmLabel(datas) {
      if(!datas) return []
      let harms = []
      this.harmtList.forEach(item=>{
        if(item.harms) {
          harms.push(...item.harms)
        }
      })
      let labels = datas.map(item=>{
        for(let i = 0; i < harms.length; i++) {
          if(item == harms[i].id) {
            return harms[i]
          }
        }
      })
      return labels
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            let submitForm = JSON.parse(JSON.stringify(this.form))
            submitForm.dimeBaseharmList = this.getHarmLabel(this.form.dimeBaseharmList)
            updatePhysicalregister(submitForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      const checkCode = row.checkCode;
      this.$modal.confirm('是否确认删除体检编号为"' + checkCode + '"的数据项？').then(function() {
        return delPhysicalregister(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('physical/physicalregister/export', {
        ...this.queryParams
      }, `physicalregister_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss" scoped>
.infoTitle {
  padding: 10px 10px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 4px solid #50bfff;
  margin: 5px 0;
  font-size: 16px;
  color: #424242;
}
.conclusion{
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #313131;
}
.sex{
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  display: inline-block;

}
</style>
